<template>
	<view>
		<TopNavCustom :title="title"></TopNavCustom>
		<text class="time">{{time}}</text>
		<u-picker :show="show" :columns="columns" @confirm="confirm" :title="pickerTitle" @close="()=>show=false"
			@cancel="()=>show=false" keyName="partName">
		</u-picker>
		<u--form labelPosition="left" :model="progressForm" class="content">
			<view class="add-zone">
				<view class="click-zone">
					<image src="/static/home_icons/delete.png" class="pix"></image>
					<image src="/static/home_icons/add.png" class="pix"></image>
				</view>
				<view class="add-form">
					<u-cell-group :border="false">
						<u-cell size="normal" title="分部工程" isLink :value="progressForm.attributes.subproject"
							@click="showPicker(0)">
						</u-cell>
						<u-cell size="normal" title="子分部工程" :value="progressForm.attributes.SubdivisionProject" isLink
							@click="showPicker(1)">
						</u-cell>
						<u-cell size="normal" title="分项工程" :value="progressForm.attributes.partName" isLink
							@click="showPicker(2)">
						</u-cell>
						<u-cell size="normal" title="进度" :value="getName(progressForm.progressValue)" isLink
							@click="showPicker(3)">
						</u-cell>
						<u-cell size="normal" title="备注" :border="false" :value="progressForm.input_num +'/200'"></u-cell>
						<view class="pixs">
							<textarea class="_textarea" maxlength="200" @input="monitorInput(progressForm)"
								v-model="progressForm.attributes.tips" placeholder="请输入备注，最多输入200个字" />
							<!-- <span class="numLimit">{{progressForm.input_num}}/200</span> -->
						</view>
						<u-cell size="normal" title="现场情况" :border="false"></u-cell>
						<view class="pixs">
							<text style="font-size: 10rpx;">上传视频：</text>
							<u-upload accept="video" :fileList="videoList" @afterRead="afterRead1" :maxCount="1"
								width="188rpx" height="188rpx" @delete="deletePic1" :maxDuration="30">
							</u-upload>
							<text style="font-size: 10rpx;">上传图片：</text>
							<u-upload :fileList="fileList" @afterRead="afterRead" name="pix" :maxCount="9"
								width="188rpx" height="188rpx" :previewFullImage="true" multiple @delete="deletePic">
							</u-upload>
						</view>
					</u-cell-group>
				</view>
			</view>
			<button type="default" class="btn" @click="goto()">提交修改</button>
		</u--form>
	</view>
</template>

<script>
	import _utils from "@/common/_utils.js"
	import $C from '@/common/config.js';
	import _file from '@/common/file.js'
	export default {
		onLoad(params) {
			this.node = JSON.parse(decodeURIComponent(params.item))
			console.log(this.node)
			this.title = this.node.title
			this.progressForm = this.node
			if (typeof this.node.attributes.tips != undefined && this.node.attributes.tips != null) {
				this.progressForm.input_num = this.progressForm.attributes.tips.length
			} else {
				this.progressForm.input_num = 0
			}
			//照片回显
			if (this.node.images != null) {
				let imgIdArray = this.node.images.split(',')
				// this.fileList
				let temp = []
				for (let i = 0; i < imgIdArray.length; i++) {
					let element = {
						status: 'success',
						message: '',
						urlId: imgIdArray[i]
					}
					element.url = $C.baseUrl + '/file/download?fileId=' + imgIdArray[i]

					temp.push(element)
				}
				this.fileList = temp
			}
			//视频回显
			if (this.node.attributes.video != null) {
				let imgIdArray = this.node.attributes.video.split(',')
				// this.fileList
				let temp = []
				for (let i = 0; i < imgIdArray.length; i++) {
					let element = {
						status: 'success',
						message: '',
						urlId: imgIdArray[i]
					}
					element.url = $C.baseUrl + '/file/download?fileId=' + imgIdArray[i]

					temp.push(element)
				}
				this.videoList = temp
			}
		},
		data() {
			return {
				time: uni.$u.timeFormat(false, 'yyyy-mm-dd'),
				title: "",
				estateId: '',
				node: {},
				progressForm: {},
				progressData: [],
				fileList: [],
				flag: 0,
				columns: [],
				pickerTitle: '',
				show: false,
				partOne: [],
				partThree: [],
				partTwo: [],
				videoList: []
			};
		},
		created() {
			this.getProgressList()
			this.Init()
		},
		methods: {
			monitorInput(item) {
				this.progressForm.input_num = item.attributes.tips.length
			},
			getName(value) {
				return value + '%'
			},
			async Init() {
				let _para = {}
				_para.parentId = this.node.attributes.parentId
				_para.estateId = this.node.estateId
				console.log("getpartone init:")
				console.log(_para)
				//获取节点列表
				let _node = await _utils.getPartInfoByParentIdAndEstateId(_para)
				if (_node) {
					this.partOne = _node
				} else {
					this.partOne = []
				}
				this.columns = [this.partOne]
				// console.log(this.columns)
			},
			async getPartTwo(id) {
				let _para = {}
				_para.parentId = id
				_para.estateId = this.node.estateId
				console.log("getpart two init:")
				console.log(_para)
				//获取节点列表
				let _node = await _utils.getPartInfoByParentIdAndEstateId(_para)
				console.log(_node)

				if (_node) {
					this.partTwo = _node
				} else {
					this.partTwo = []
				}
				this.columns = [this.partTwo]
			},
			async getPartThree(id) {
				let _para = {}
				_para.parentId = id
				_para.estateId = this.node.estateId
				console.log("getpart two init:")
				console.log(_para)
				//获取节点列表
				let _node = await _utils.getPartInfoByParentIdAndEstateId(_para)
				if (_node) {
					this.partThree = _node
				} else {
					this.partThree = []
				}
				this.columns = [this.partThree]
			},
			formatData() {
				let cloneData = this.progressForm
				let pixs = []
				for (let j = 0; j < this.fileList.length; j++) {
					pixs.push(this.fileList[j].urlId)
				}
				cloneData.images = pixs.toString()
				let video = []
				for (let j = 0; j < this.videoList.length; j++) {
					video.push(this.videoList[j].urlId)
				}
				cloneData.attributes.video = video.toString()
				cloneData.progressStatus = 2

				console.log(cloneData)
				if (_utils.updateProgress(cloneData)) {
					uni.$showMsg("修改成功")
					// this.goBack()
				} else {
					uni.$showMsg('提交失败')
				}
			},
			goto() {
				//数据校验
				let flag = true
				let _form_data = this.progressForm
				if (_form_data.partId == '') {
					uni.$showMsg('尚未选择工程')
					flag = false
				} else if (_form_data.progressValue == '') {
					uni.$showMsg('尚未选择进度值')
					flag = false
				} else if (_form_data.images == '') {
					uni.$showMsg('尚未上传现场图片')
					flag = false
				}
				if (flag)
					this.formatData()
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				uni.$showMsg("删除图片成功")
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic1(event) {
				this.videoList.splice(event.index, 1)
				uni.$showMsg("删除视频成功")
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.videoList.length
				lists.map((item) => {
					this.videoList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadVideoFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					let item = this.videoList[fileListLen]
					this.videoList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId
					}))
					fileListLen++
				}
			},
			confirm(item) {
				switch (this.flag) {
					case 0:
						this.progressForm.subproject = item.value[0].partName
						this.progressForm.partId = item.value[0].partId
						// this.progressForm.partName = item.value[0].partName
						this.getPartTwo(item.value[0].partId)
						break;
					case 1:
						this.progressForm.SubdivisionProject = item.value[0].partName
						this.progressForm.partId = item.value[0].partId
						// this.progressForm.partName = item.value[0].partName
						this.getPartThree(item.value[0].partId)
						break;
					case 2:
						this.progressForm.partId = item.value[0].partId
						this.progressForm.partName = item.value[0].partName
						break;
					case 3:
						this.progressForm.progressValue = item.value[0].value
						this.progressForm.progressName = item.value[0].partName
						break;
				}
				this.show = false
			},
			//获取进度列表
			getProgressList() {
				this.progressData = _utils.progressData()
			},
			showPicker(item) {
				this.flag = item
				switch (this.flag) {
					case 0:
						this.pickerTitle = '选择分部工程'
						this.columns = [this.partOne]
						break;
					case 1:
						if (this.progressForm.subproject) {
							this.pickerTitle = '选择子分部工程'
							this.columns = [this.partTwo]
						} else {
							uni.$showMsg('请先选择分部工程')
							return
						}
						break;
					case 2:
						if (this.progressForm.subproject) {
							this.pickerTitle = '选择分项工程'
							this.columns = [this.partThree]
						} else {
							uni.$showMsg('请先选择子分部工程')
							return
						}
						break;
					case 3:
						this.pickerTitle = '进度'
						this.columns = [this.progressData]
						break;
				}
				this.show = true
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 30rpx 58rpx 30rpx;
		display: flex;
		flex-direction: column;

		.progressForm {
			display: block;

			.add-zone {
				width: 100%;
			}
		}
	}

	.add-zone {
		padding: 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.add-form {
		.pixs {
			padding: 20rpx;

		}
	}

	.click-zone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.pix {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.btn {
		margin-top: 60rpx;
		width: 560rpx;
		background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 44rpx;
		color: #FFFFFF;
	}

	.time {
		padding: 30rpx;
	}
	._textarea {
		// width: 620rpx;
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
	}
	
	.numLimit {
		position: relative;
		top: -40rpx;
		right: -530rpx;
	
	}
</style>
